<template>
  <div>
    <PageWrapper>
      <div ref="searchForm">
        <div style="border-bottom: 1px solid #eee; padding-bottom: 10px; font-size: 16px">
          <Icon :icon="getTitle.icon" class="m-1 pr-1" />
          <span> {{ getTitle.value }} </span>
        </div>
        <!-- <BasicForm ref="form" @submit="handleSubmit" @reset="handleReset" @register="registerForm">
          <template #resetBefore>
            <a-button class="ml-2" type="default" @click="handleExport()">
              <Icon icon="ant-design:download-outlined" /> {{ t('导出') }}
            </a-button>
          </template>
        </BasicForm> -->
      </div>
      <!-- 报表 -->
      <iframe
        v-if="iframeSrc"
        @load="iframeLoad"
        :src="iframeSrc"
        :style="{ width: '100%', height: `${reportPros.height}` }"
      ></iframe>
    
    </PageWrapper>
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsProjInfoPmProjectinformationZxqkIndex',
  });
</script>
<script setup lang="ts">
  import { defineComponent, ref, onMounted } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { PageWrapper } from '/@/components/Page';
  import { schemasData } from '/@/utils/custom';
  import { listSet } from '/@/api/test/testData';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { useGlobSetting } from '/@/hooks/setting';
  import { reportData } from '/@/api/test/testData';
  import { useLoading } from '/@/components/Loading';
  // import { basUserCusTreeData } from '/@/api/bas/cus/basUserCus';
  import { basUserCusPersonTreeData } from '/@/api/bas/cus/basUserCusPerson';
  import { handleExport } from '/@/utils/export';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { BasicForm, FormProps, FormSchema, useForm } from '/@/components/Form';
  import { downloadByUrl } from '/@/utils/file/download';
  import { CusDzdDetailsExport } from '/@/api/shop/report/report';

  const { t } = useI18n('report.ureportView');
  const { showMessage } = useMessage();

  const { ctxPath, adminPath } = useGlobSetting();
  let defaultValue = ref<any>({
    minDate: '',
    maxDate: '',
    cusCode: '',
  });
  let iframeSrc = ref<string>('');
  // let searchForm = ref<any>();
  let form = ref<any>('');
  const getTitle = ref({
    icon: router.currentRoute.value.meta.icon || 'ant-design:book-outlined',
    value: t('执行统计'),
  });
  const props = defineProps({
    viewCode: { type: String, default: '' },
  });
  let reportPros = ref<any>({
    fileName: '材料执行统计-项目', //文件名
    _t: '3,4,6', // 显示按钮
    height: '', //iframe高度
    url: '', // 通用地址
  });
  //配置表单内容
  // const [registerForm, { getFieldsValue, validate, setProps, setFieldsValue }] = useForm({
  //   labelWidth: 90,
  //   showActionButtonGroup: true,
  //   baseColProps: { lg: 6, md: 8 },
  //   showAdvancedButton: true,
  //   compact: true,
  //   schemas: [
  //     {
  //       label: t('客户'),
  //       field: 'cusCode',
  //       // fieldLabel: 'basCus.name',
  //       component: 'TreeSelect',
  //       componentProps: {
  //         api: basUserCusPersonTreeData,
  //         params: { isAll: true },
  //         canSelectParent: false,
  //         allowClear: true,
  //         immediate: true,
  //       },
  //       required: true,
  //       itemProps: { validateTrigger: 'blur' },
  //     },
  //     {
  //       label: t('开始日期'),
  //       field: 'minDate',
  //       component: 'DatePicker',
  //       componentProps: {
  //         format: 'YYYY-MM-DD',
  //         valueFormat: 'YYYY-MM-DD',
  //         showTime: false,
  //       },
  //       required: true,
  //     },
  //     {
  //       label: t('结束日期'),
  //       field: 'maxDate',
  //       component: 'DatePicker',
  //       componentProps: {
  //         format: 'YYYY-MM-DD',
  //         valueFormat: 'YYYY-MM-DD',
  //         showTime: false,
  //       },
  //       required: true,
  //     },
  //   ],
  // });
  const [openFullLoading, closeFullLoading] = useLoading({
    tip: '加载中...',
  });

  // const [registerModal, { openModal, closeModal }] = useModal();

  // const inputFormSchemas: FormSchema[] = [
  //   {
  //     label: t('开始日期'),
  //     field: 'minDate',
  //     component: 'DatePicker',
  //     componentProps: {
  //       format: 'YYYY-MM-DD',
  //       valueFormat: 'YYYY-MM-DD',
  //       showTime: false,
  //     },
  //     required: true,
  //   },
  //   {
  //     label: t('结束日期'),
  //     field: 'maxDate',
  //     component: 'DatePicker',
  //     componentProps: {
  //       format: 'YYYY-MM-DD',
  //       valueFormat: 'YYYY-MM-DD',
  //       showTime: false,
  //     },
  //     required: true,
  //   },
  // ];

  // const [registerFormDate, { validate: dateValidate, setFieldsValue: setFormDate }] = useForm({
  //   labelWidth: 90,
  //   schemas: inputFormSchemas,
  //   baseColProps: { lg: 24, md: 24 },
  // });

  // 获取uuid
  function generateUUID() {
    let d = new Date().getTime();
    let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      let r = (d + Math.random() * 16) % 16 | 0;
      d = Math.floor(d / 16);
      return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
    });
    return uuid;
  }
  // iframe加载完成
  function iframeLoad() {
    closeFullLoading();
  }
  // 重置
  // function handleReset() {
  //   setFieldsValue(defaultValue.value);
  // }
  // 查询
  async function handleSubmit() {
    reportPros.value.height = document.documentElement.clientHeight * 0.82 + 'px';
    openFullLoading();
    let url = reportPros.value.url;
    // let obj = await getFieldsValue();
    // for (const key in obj) {
    //   url += `&${key}=${obj[key]}`;
    // }
    // schemas.value?.forEach((item) => {
    //     if (form.value.formModel[item.field] && item.component != 'RangePicker') {
    //       url += `&${item.field}=${form.value.formModel[item.field]}`;
    //     }
    //     if (item.component == 'RangePicker' && form.value.formModel[item.field]) {
    //       url += `&${item.field}_gte=${form.value.formModel[item.field][0]}&${item.field}_lte=${
    //         form.value.formModel[item.field][1]
    //       }`;
    //     }
    // });
    iframeSrc.value =
      url + `&key=${generateUUID()}&_t=${reportPros.value._t}&_n=${reportPros.value.fileName}&projectno=${router.currentRoute.value.query.code}
      &mcode=${router.currentRoute.value.query.selIds || ''}&pucode=${router.currentRoute.value.query.pucode || ''}`;
    console.log(iframeSrc.value, 'iframeSrc=====');
  }
  // 进入页面获取数据
  onMounted(async () => {
    // let myDate = new Date();
    // let y = myDate.getFullYear();
    // let m = myDate.getMonth() + 1 < 10 ? `0${myDate.getMonth() + 1}` : myDate.getMonth() + 1;
    // let d = myDate.getDate() < 10 ? `0${myDate.getDate()}` : myDate.getDate();
    // let datevalue = `${y}-${m}-${d}`;
    // defaultValue.value.maxDate = datevalue;
    // await setFieldsValue(defaultValue.value);
    reportPros.value.url = `${ctxPath}/ureport/preview?_u=file:${reportPros.value.fileName}.ureport.xml`;
    await handleSubmit();
  });

  // function handleExport() {
  //   openModal(true, {});
  //   setFormDate([{ minDate: '' }, { maxDate: '' }]);
  // }

  // async function handleQuery() {
  //   const res = await dateValidate();
  //   //await CusDzdDetailsExport({ minDate: res.minDate, maxDate: res.maxDate });
  //   downloadByUrl({
  //     url: `${ctxPath}/${adminPath}/dzd/export2?minDate=${res.minDate}&maxDate=${res.maxDate}`,
  //   });
  //   closeModal();
  // }
</script>
